import React from 'react';
import type {FormProps} from 'antd'
import {Button,Form,Input, message} from "antd"
import style from "./login.module.scss"
import { loginApi } from '@/api/requestApi';
import { useNavigate } from 'react-router-dom';

type FieldType={
  account:string;
  password:string;
}

export default function login() {
  const navigate = useNavigate()
  const onFinish:FormProps<FieldType>['onFinish'] = async(value)=>{
    const {account,password}=value
    const res = await loginApi({account,password})
    // console.log(res)
    if(res && res.status === 200){
      message.success('登录成功')
      setTimeout(()=>{
        navigate('/home')
      },1000)
      localStorage.setItem('token',res.data.token)
    }else{
      message.error('登录成功')
    }
  }
  const [from] =Form.useForm()
  return (
    <div className={style.container}>
      <div className={style.content}>
        <h2>文章发布系统</h2>
        <Form 
          name='basic'
          form={from}
          labelCol={{span:4}}
          wrapperCol={{span:18}}
          style={{maxWidth:600}}
          initialValues={{remember:true}}
          onFinish={onFinish}
          autoComplete='off'
        >
          <Form.Item<FieldType>
            label='账号'
            name='account'
            rules={[{required:true,message:'请输入账号'}]}
            >
              <Input/>
          </Form.Item>
          <Form.Item<FieldType>
            label='密码'
            name='password'
            rules={[{required:true,message:'请输入密码'}]}
            >
              <Input.Password/>
            </Form.Item>
          <Form.Item label={null}>
            <Button type="primary" htmlType="submit">
              登录
            </Button>
            <Button onClick={()=>{from.resetFields()}}>
              取消
            </Button>
          </Form.Item>  
        </Form>
      </div>
    </div>
  );
}

